React Suspense: データフェッチングとコード分割に関する包括的なガイド

React Suspenseは、React 16.6で導入された強力な機能で、データの読み込みやコードのダウンロードなど、何らかの処理を待機中にコンポーネントのレンダリングを「中断」できます。これにより、ローディング状態を宣言的に管理し、非同期操作を適切に処理することで、ユーザーエクスペリエンスを向上させることができます。このガイドでは、Suspenseの概念、使用事例、およびReactアプリケーションでの実装方法の実践的な例について説明します。

React Suspenseとは？

Suspenseは、他のコンポーネントをラップし、それらのコンポーネントがPromiseの解決を待機している間にフォールバックUI（ローディングスピナーなど）を表示できるReactコンポーネントです。このPromiseは、以下に関連する可能性があります。

• データフェッチング： APIから取得するデータを待機します。
• コード分割： JavaScriptモジュールのダウンロードと解析を待機します。

Suspenseが登場する前は、ローディング状態の管理には、複雑な条件付きレンダリングと非同期操作の手動処理が伴うことがよくありました。Suspenseは、これを宣言的なアプローチで簡素化し、コードをよりクリーンで、より保守しやすくします。

主要な概念

• Suspenseコンポーネント： <Suspense>コンポーネント自体。ラップされたコンポーネントが中断されている間に表示するUIを指定するfallbackプロップを受け入れます。
• React.lazy()： コンポーネントを動的にインポートすることにより、コード分割を可能にする関数。コンポーネントがロードされると解決されるPromiseを返します。
• Promiseの統合： SuspenseはPromiseとシームレスに統合されます。コンポーネントがまだ解決されていないPromiseからデータをレンダリングしようとすると、「中断」し、フォールバックUIを表示します。

使用事例

1. Suspenseを使用したデータフェッチング

Suspenseの主な使用事例の1つは、データフェッチングの管理です。条件付きレンダリングでローディング状態を手動で管理する代わりに、Suspenseを使用して、データが到着するのを待機している間にローディングインジケーターを宣言的に表示できます。

例：APIからユーザーデータをフェッチする

APIからフェッチされたユーザーデータを表示するコンポーネントがあるとします。Suspenseなしでは、次のようなコードになる可能性があります。

import React, { useState, useEffect } from 'react';

function UserProfile() {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/users/123');
        const data = await response.json();
        setUser(data);
      } catch (err) {
        setError(err);
      } finally {
        setIsLoading(false);
      }
    }

    fetchData();
  }, []);

  if (isLoading) {
    return <p>Loading user data...</p>;
  }

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  if (!user) {
    return <p>No user data available.</p>;
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
    </div>
  );
}

export default UserProfile;

このコードは機能しますが、複数の状態変数（isLoading、error、user）と条件付きレンダリングロジックの管理が含まれます。Suspenseを使用すると、SWRやTanStack Query（旧React Query）のようなデータフェッチングライブラリを使用することでこれを簡素化できます。これらはSuspenseとシームレスに連携するように設計されています。

SuspenseでSWRを使用する方法は次のとおりです。

import React from 'react';
import useSWR from 'swr';

// A simple fetcher function
const fetcher = (...args) => fetch(...args).then(res => res.json());

function UserProfile() {
  const { data: user, error } = useSWR('/api/users/123', fetcher, { suspense: true });

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
    </div>
  );
}

function App() {
  return (
    <Suspense fallback={<p>Loading user data...</p>}>
      <UserProfile />
    </Suspense>
  );
}

export default App;

この例では、次のようになります。

• useSWRを使用して、ユーザーデータをフェッチします。suspense: trueオプションは、データがまだ利用できない場合にSWRにPromiseをスローするように指示します。
• UserProfileコンポーネントは、ローディング状態やエラー状態を明示的に管理する必要はありません。データが利用可能になったときにユーザーデータをレンダリングするだけです。
• <Suspense>コンポーネントは、SWRによってスローされたPromiseをキャッチし、データのフェッチ中にフォールバックUI（<p>Loading user data...</p>）を表示します。

このアプローチにより、コンポーネントロジックが簡素化され、データフェッチングについて推論しやすくなります。

データフェッチングのグローバルな考慮事項：

グローバルなオーディエンス向けのアプリケーションを構築する場合は、以下を考慮してください。

• ネットワークレイテンシ： 異なる地理的場所にいるユーザーは、さまざまなネットワークレイテンシを経験する可能性があります。Suspenseは、遠くのサーバーからデータをフェッチしている間にローディングインジケーターを表示することで、より優れたユーザーエクスペリエンスを提供できます。コンテンツ配信ネットワーク（CDN）を使用して、データをユーザーの近くにキャッシュすることを検討してください。
• データのローカライズ： APIがデータのローカライズをサポートしていることを確認して、ユーザーの希望する言語と形式でデータを提供できるようにします。
• APIの可用性： 異なる地域からのAPIの可用性とパフォーマンスを監視して、一貫したユーザーエクスペリエンスを確保します。

2. React.lazy()とSuspenseによるコード分割

コード分割は、アプリケーションをより小さなチャンクに分割する手法であり、オンデマンドでロードできます。これにより、特に大規模で複雑なプロジェクトでは、アプリケーションの初期ロード時間を大幅に改善できます。

Reactは、コンポーネントのコード分割にReact.lazy()関数を提供します。Suspenseと共に使用すると、コンポーネントのダウンロードと解析を待機している間にフォールバックUIを表示できます。

例：コンポーネントの遅延読み込み

import React, { Suspense, lazy } from 'react';

const OtherComponent = lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<p>Loading...</p>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

export default MyComponent;

この例では、次のようになります。

• React.lazy()を使用して、OtherComponentを動的にインポートします。これは、コンポーネントがロードされると解決されるPromiseを返します。
• <OtherComponent />を<Suspense>でラップし、fallbackプロップを提供します。
• OtherComponentがロードされている間、フォールバックUI（<p>Loading...</p>）が表示されます。コンポーネントがロードされると、フォールバックUIが置き換えられます。

コード分割の利点：

• 初期ロード時間の改善： 初期ビューに必要なコードのみをロードすることにより、アプリケーションがインタラクティブになるまでの時間を短縮できます。
• バンドルサイズの削減： コード分割は、アプリケーションのJavaScriptバンドルの全体的なサイズを削減するのに役立ちます。これは、特に低帯域幅の接続でパフォーマンスを向上させることができます。
• より良いユーザーエクスペリエンス： より高速な初期ロードを提供し、必要な場合にのみコードをロードすることにより、よりスムーズで応答性の高いユーザーエクスペリエンスを作成できます。

高度なコード分割テクニック：

• ルートベースのコード分割： ルートに基づいてアプリケーションを分割し、各ルートがそれに必要なコードのみをロードするようにします。これは、React Routerのようなライブラリで簡単に実現できます。
• コンポーネントベースのコード分割： 個々のコンポーネントを個別のチャンクに分割します。特に、大規模または使用頻度の低いコンポーネントの場合。
• 動的インポート： コンポーネント内で動的インポートを使用して、ユーザーのインタラクションやその他の条件に基づいてオンデマンドでコードをロードします。

3. Concurrent ModeとSuspense

Suspenseは、ReactのConcurrent Modeの主要な要素であり、Reactが複数のタスクを同時に処理できるようにする一連の新機能です。Concurrent Modeを使用すると、Reactは重要な更新を優先し、長時間実行されるタスクを中断し、アプリケーションの応答性を向上させることができます。

Concurrent ModeとSuspenseを使用すると、Reactは次のことができます。

• すべてのデータが利用可能になる前にコンポーネントのレンダリングを開始する： Reactは、一部のデータ依存関係がまだフェッチされている場合でも、コンポーネントのレンダリングを開始できます。これにより、Reactは部分的なUIを早期に表示できるようになり、アプリケーションの認識されるパフォーマンスが向上します。
• レンダリングを中断して再開する： Reactがコンポーネントをレンダリングしているときに、より優先度の高い更新が入ってきた場合、レンダリングプロセスを中断し、より優先度の高い更新を処理してから、後でコンポーネントのレンダリングを再開できます。
• メインスレッドのブロックを回避する： Concurrent Modeを使用すると、Reactは、UIが応答しなくなるのを防ぐことができるメインスレッドをブロックすることなく、長時間実行されるタスクを実行できます。

Concurrent Modeを有効にするには、React 18でcreateRoot APIを使用できます。

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');
const root = createRoot(container); // Create a root.
root.render(<App />);

Suspenseの使用に関するベストプラクティス

• データフェッチングライブラリを使用する： Suspenseとシームレスに連携するように設計されたSWRやTanStack Queryなどのデータフェッチングライブラリの使用を検討してください。これらのライブラリは、キャッシュ、自動再試行、エラー処理などの機能を提供し、データフェッチングロジックを簡素化できます。
• 意味のあるフォールバックUIを提供する： フォールバックUIは、何かがロードされていることを明確に示している必要があります。スピナー、プログレスバー、またはスケルトンローダーを使用して、視覚的に魅力的で有益なローディングエクスペリエンスを作成します。
• エラーを適切に処理する： レンダリング中に発生するエラーをキャッチするには、Error Boundariesを使用します。これにより、アプリケーション全体がクラッシュするのを防ぎ、より良いユーザーエクスペリエンスを提供できます。
• コード分割を最適化する： コード分割を戦略的に使用して、アプリケーションの初期ロード時間を短縮します。大規模または使用頻度の低いコンポーネントを特定し、個別のチャンクに分割します。
• Suspenseの実装をテストする： Suspenseの実装を徹底的にテストして、正しく機能し、アプリケーションがローディング状態とエラーを適切に処理していることを確認します。

Error Boundariesによるエラー処理

Suspenseは*ローディング*状態を処理しますが、Error Boundariesはレンダリング中の*エラー*状態を処理します。Error Boundariesは、子コンポーネントツリー内のJavaScriptエラーをキャッチし、それらのエラーをログに記録し、コンポーネントツリー全体をクラッシュさせるのではなく、フォールバックUIを表示するReactコンポーネントです。

Error Boundaryの基本的な例を次に示します。

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

Error Boundaryを使用するには、エラーをスローする可能性のあるコンポーネントを囲みます。

import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';

function App() {
  return (
    <ErrorBoundary>
      <MyComponent />
    </ErrorBoundary>
  );
}

export default App;

SuspenseとError Boundariesを組み合わせることで、ローディング状態とエラーの両方を適切に処理する、堅牢で回復力のあるアプリケーションを作成できます。

実際の例

Suspenseを使用してユーザーエクスペリエンスを向上させる方法のいくつかの実際の例を次に示します。

• EコマースWebサイト： Suspenseを使用して、製品の詳細や画像をフェッチしている間にローディングインジケーターを表示します。これにより、データが読み込まれるのを待機している間、ユーザーが空白のページを表示するのを防ぐことができます。
• ソーシャルメディアプラットフォーム： Suspenseを使用して、ユーザーがページをスクロールするにつれて、コメントや投稿を遅延読み込みします。これにより、ページの初期ロード時間を改善し、ダウンロードする必要があるデータの量を減らすことができます。
• ダッシュボードアプリケーション： Suspenseを使用して、チャートやグラフのデータをフェッチしている間にローディングインジケーターを表示します。これにより、よりスムーズで応答性の高いユーザーエクスペリエンスを提供できます。

例：国際Eコマースプラットフォーム

世界中で商品を販売している国際Eコマースプラットフォームを考えてみましょう。プラットフォームは、SuspenseとReact.lazy()を活用して、次のことを実行できます。

• 製品画像を遅延読み込みする： React.lazy()を使用して、ビューポートに表示されている場合にのみ製品画像を読み込みます。これにより、製品一覧ページの初期ロード時間を大幅に短縮できます。各遅延読み込み画像は、実際の画像が読み込まれている間にプレースホルダー画像を表示するために、<Suspense fallback={<img src="placeholder.png" alt="Loading..." />}>でラップします。
• 国固有のコンポーネントをコード分割する： プラットフォームに国固有のコンポーネント（通貨のフォーマット、住所入力フィールドなど）がある場合は、React.lazy()を使用して、ユーザーが特定の国を選択したときにのみこれらのコンポーネントをロードします。
• ローカライズされた製品の説明をフェッチする： Suspenseを使用したデータフェッチングライブラリ（SWRなど）を使用して、ユーザーの希望する言語で製品の説明をフェッチします。ローカライズされた説明がフェッチされている間、ローディングインジケーターを表示します。

結論

React Suspenseは、Reactアプリケーションのユーザーエクスペリエンスを大幅に向上させることができる強力な機能です。ローディング状態とコード分割を宣言的に管理する方法を提供することにより、Suspenseはコードを簡素化し、非同期操作について推論しやすくします。小さな個人プロジェクトを構築している場合でも、大規模なエンタープライズアプリケーションを構築している場合でも、Suspenseは、よりスムーズで、より応答性が高く、より高性能なユーザーエクスペリエンスを作成するのに役立ちます。

Suspenseをデータフェッチングライブラリとコード分割技術と統合することにより、ReactのConcurrent Modeの可能性を最大限に引き出し、真にモダンで魅力的なWebアプリケーションを作成できます。Suspenseを取り入れ、React開発を次のレベルに引き上げましょう。

さらに学習

• React Suspenseドキュメント
• SWRドキュメント
• TanStack Queryドキュメント
• React 18発表（Concurrent Mode）